<template>
    <view class="page">
        <view class="nav-bar">
            <view class="nav-box">
                <view class="btn" @click="goHome" :style="`--icon: url(${ base_url + '/static/goHome.svg' });`"></view>
                <view class="btn" @click="goBack" :style="`--icon: url(${ base_url + '/static/goBack.svg' });`"></view>
            </view>
        </view>
        <view class="type-tag" :style="`--tc: ${ holeType.tc }; --bc: ${ holeType.bc }`">{{ holeType.text }}</view>
        <scroll-view class="content-scroll" scroll-y="true">
            <view class="hole-list">
                <Hole v-for="item in holeList" :key="item.id"
				    :avatar="base_url + item.avatar"
					:username="item.username"
					:date="item.date"
					:type="item.type"
					:title="item.title"
					:description="item.description"
					:imageUrl="base_url + item.imageUrl"
					:commentList="item.commentList"
				/>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

import { base_url } from '../../api/config';

import Hole from '../../components/treeHole/Hole.vue';

// 树洞类型
let holeType = { id: 1, text: "#学业压力", tc: "rgb(255, 119, 0)", bc: "rgb(255, 198, 136)" };

// 树洞内容
const holeList = [
	{ id: 1, avatar: '/static/default_avatar.jpg', username: '大学生心灵树洞', date: '2025-6-6 18:00:00', type: '情绪情感', title: '六月心事，等你诉说', description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`, imageUrl: '/static/hole_default.jpg', commentList: [ { id: 1, avatar: '/static/default_avatar.jpg', name: '陈树洞', text: '考完试我一定要去海边！！！', time: '2小时前' }, { id: 2, avatar: '/static/default_avatar.jpg', name: '树小洞2025', text: '未来要干嘛啊！！好焦虑。。。。', time: '2小时前' } ] },
	{ id: 2, avatar: '/static/default_avatar.jpg', username: '大学生心灵树洞', date: '2025-6-6 18:00:00', type: '情绪情感', title: '六月心事，等你诉说', description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`, imageUrl: '/static/hole_default.jpg', commentList: [ { id: 1, avatar: '/static/default_avatar.jpg', name: '陈树洞', text: '考完试我一定要去海边！！！', time: '2小时前' }, { id: 2, avatar: '/static/default_avatar.jpg', name: '树小洞2025', text: '未来要干嘛啊！！好焦虑。。。。', time: '2小时前' } ] },
	{ id: 3, avatar: '/static/default_avatar.jpg', username: '大学生心灵树洞', date: '2025-6-6 18:00:00', type: '情绪情感', title: '六月心事，等你诉说', description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`, imageUrl: '/static/hole_default.jpg', commentList: [ { id: 1, avatar: '/static/default_avatar.jpg', name: '陈树洞', text: '考完试我一定要去海边！！！', time: '2小时前' }, { id: 2, avatar: '/static/default_avatar.jpg', name: '树小洞2025', text: '未来要干嘛啊！！好焦虑。。。。', time: '2小时前' } ] },
	{ id: 4, avatar: '/static/default_avatar.jpg', username: '大学生心灵树洞', date: '2025-6-6 18:00:00', type: '情绪情感', title: '六月心事，等你诉说', description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`, imageUrl: '/static/hole_default.jpg', commentList: [ { id: 1, avatar: '/static/default_avatar.jpg', name: '陈树洞', text: '考完试我一定要去海边！！！', time: '2小时前' }, { id: 2, avatar: '/static/default_avatar.jpg', name: '树小洞2025', text: '未来要干嘛啊！！好焦虑。。。。', time: '2小时前' } ] },
	{ id: 5, avatar: '/static/default_avatar.jpg', username: '大学生心灵树洞', date: '2025-6-6 18:00:00', type: '情绪情感', title: '六月心事，等你诉说', description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`, imageUrl: '/static/hole_default.jpg', commentList: [ { id: 1, avatar: '/static/default_avatar.jpg', name: '陈树洞', text: '考完试我一定要去海边！！！', time: '2小时前' }, { id: 2, avatar: '/static/default_avatar.jpg', name: '树小洞2025', text: '未来要干嘛啊！！好焦虑。。。。', time: '2小时前' } ] },
	{ id: 6, avatar: '/static/default_avatar.jpg', username: '大学生心灵树洞', date: '2025-6-6 18:00:00', type: '情绪情感', title: '六月心事，等你诉说', description: `六月的风，吹来了蝉鸣与栀子花香，也吹进了每个人的心房。在这个充满活力与希望的月份，大学生心灵树洞向大家发起征稿啦！无论是你在六月里邂逅的小美好一一比如一场浪漫的雨后彩虹，一次和朋友的欢乐野餐;还是那些藏在心底的小烦恼一一像是考试的压力，对未来方向的迷茫;亦或是你对六月独有的期许与展望······都欢迎分享给我们······`, imageUrl: '/static/hole_default.jpg', commentList: [ { id: 1, avatar: '/static/default_avatar.jpg', name: '陈树洞', text: '考完试我一定要去海边！！！', time: '2小时前' }, { id: 2, avatar: '/static/default_avatar.jpg', name: '树小洞2025', text: '未来要干嘛啊！！好焦虑。。。。', time: '2小时前' } ] },
];

function goHome() {
    uni.reLaunch({
        url: '/pages/main/main'
    });
}

function goBack() {
    uni.navigateBack();
};

</script>

<style scoped lang="less">
.page {
    width: 100vw;
	min-height: 100vh;
	background-image: linear-gradient(to bottom, rgb(255, 212, 168), #fff);
    
    .nav-bar {
        box-sizing: border-box;
        width: 100%;
        height: 30vw;
        padding-top: 15vw;

        .nav-box {
            width: min-content;
            padding: 1vw;
            background-color: #888;
            display: flex;
            border-radius: 0 5vw 5vw 0;
            
            .btn {
                width: 12vw;
                height: 7vw;
                background-image: var(--icon);
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }
        }
    }

    .type-tag {
        display: inline-block;
        padding: 1vw 3vw;
        margin: 0 3vw 3vw;
        background-color: var(--bc);
        color: var(--tc);
        border-radius: 4vw;
        font-size: 3.5vw;
        font-weight: 900;
    }
}
</style>